import { defineStore } from 'pinia'
import { computed, reactive, toRefs } from 'vue'
// 定义状态的类型 一般情况下Pinia会自动推断出state的类型，你就无需定义接口。如果state的数据类型比较复杂，推荐你定义一个接口来描述state的类型
export interface IUserState {
  userName: string
  userIcon: string
  age: number
  count: number
}

/**
 * @description:用户数据
 * @return {*}
 */
const useUserStore = defineStore(
  'user',
  () => {
    //定义数据仓库
    const state = reactive<IUserState>({
      userName: 'Liu',
      userIcon: 'Dehua',
      age: 2,
      count: 1
    })
    //输出计算属性
    const computedNum = computed(() => state.age * state.count)
    //规定：所有方法 使用function 标记
    function setUserInfo(name: string, age: number): void {
      state.userName = name
      state.age = age
    }

    return {
      ...toRefs(state),
      computedNum,
      setUserInfo
    }
  },
  {}
)

/**
 * *页面引入 import userStore from ‘***’
 *const userState = userStore()
 *
 * ❌ 这将无法生效，因为它破坏了响应性
 *  // 这与从 `props` 中解构是一样的
 * const { name, doubleCount } = userStore()
 *
 *
 * ✅ 个将是响应式的
 * const userName =computed(() => userState.userName)
 * ✅ 个将是响应式的
 * 或者直接使用 userState.userName
 */
export default useUserStore
